﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>分类列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/libs/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/css/public.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .layui-table-view {
      border: 0;
    }
  </style>
</head>

<body>
  <div id="main">
    <a href="/admin/cates/create" class="layui-btn">添加分类</a>
    <!-- <div class="layui-btn-group demoTable">
      <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
      <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
      <button class="layui-btn" data-type="isAll">验证是否全选</button>
    </div> -->

    <table class="layui-table" lay-data="{width: 492, height:332, url:'/admin/cates/getCateList', id:'idTest'}"
      lay-filter="demo">
      <thead>
        <tr>
          <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
          <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
          <th lay-data="{field:'cate_name', width:120}">分类名称</th>
          <th lay-data="{field:'sort', width:80, sort: true}">排序</th>
          <th lay-data="{fixed: 'right', width:158, align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
      </thead>
    </table>

    <script type="text/html" id="barDemo">
      <!--  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
  </div>
  <script src="/libs/jquery.js"></script>
  <script src="/libs/layui/layui.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
  <script>
    layui.use('table', function () {
      var table = layui.table;
      //监听表格复选框选择
      /* table.on('checkbox(demo)', function (obj) {
        console.log(obj)
      }); */
      //操作
      table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
          //layer.msg('ID：' + data.id + ' 的查看操作');
        } else if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
              //发送ajax请求进行数据库的删除
             $.ajax({
               url:`/admin/cates/${data.id}`,
               type:'delete',
               success(res){
                   if(res.status==200){
                       layer.msg('删除成功',{icon:6,time:1000},function(){
                            obj.del(); //页面删除
                            layer.close(index); //关闭弹出层
                       })
                   }else{
                       layer.msg('删除失败',{icon:5})
                        layer.close(index); //关闭弹出层
                   }
                  
               }
             })
          });
        } else if (obj.event === 'edit') {
            //显示修改的表单
            let id=data.id
            //location.href=`/admin/cates/${id}/edit` 
            layer.open({
              type:2,
              content:[`/admin/cates/${id}/edit`,'no'],
              area: ['500px', '300px'],
              title:'修改分类',
              end:function(){
                  //关闭层的回调函数，重新加载页面
                 location.reload();
              }
            }) 
        }
      });

      /*  var $ = layui.$,
       active = {
         getCheckData: function () { //获取选中数据
           var checkStatus = table.checkStatus('idTest'),
             data = checkStatus.data;
           layer.alert(JSON.stringify(data));
         },
         getCheckLength: function () { //获取选中数目
           var checkStatus = table.checkStatus('idTest'),
             data = checkStatus.data;
           layer.msg('选中了：' + data.length + ' 个');
         },
         isAll: function () { //验证是否全选
           var checkStatus = table.checkStatus('idTest');
           layer.msg(checkStatus.isAll ? '全选' : '未全选')
         }
       }; */

      /*   $('.demoTable .layui-btn').on('click', function () {
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        }); */
    });
  </script>

</body>

</html>